﻿@page "/AutoComplete/Highlight"

@using Syncfusion.Blazor.DropDowns
@using Syncfusion.Blazor.Inputs

@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample demonstrates the highlight functionalities of the AutoComplete. Type a character(s) in the AutoComplete element and the typed characters will be highlighted in the suggestion list. By default, <a href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.AutoCompleteModel.html#Syncfusion_Blazor_DropDowns_AutoCompleteModel_FilterType' target='_blank'> Contains</a> filter type is set in this sample and provided with the options to choose different filter type in the property panel.</p>
</SampleDescription>
<ActionDescription>
   <p>The AutoComplete has built-in support to highlight the searched characters on the suggested list items when <a href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.AutoCompleteModel.html#Syncfusion_Blazor_DropDowns_AutoCompleteModel_Highlight' target='_blank'> Highlight</a> is enabled.</p>
   <p>This sample illustrates that, the searched characters on the country suggestion list items are highlighted.</p>
</ActionDescription>

<div class="control-section col-lg-12 selectionlimit">
    <div class="col-lg-8">
        <div class="content selectionlimit-multiselect">
            <SfAutoComplete TValue="string" TItem="Countries" FilterType="@filterType" Placeholder="e.g. Australia" DataSource="@Country" Highlight="true" PopupHeight="350px">
                <AutoCompleteFieldSettings Value="Name"></AutoCompleteFieldSettings>
            </SfAutoComplete>
        </div>
    </div>
    <div class="col-lg-4">
        <div class='content property-section'>
            <div class="property">Properties</div>
            <table>
                <tr>
                    <td>
                        <div class="selectionText">Filter Type </div>
                    </td>
                    <td>
                        <SfDropDownList TValue="string" TItem="FilterTypes" DataSource="@Data" @bind-Index="@index">
                            <DropDownListEvents TItem="FilterTypes" TValue="string" ValueChange="OnChangeFilterType"></DropDownListEvents>
                            <DropDownListFieldSettings Text="Text" Value="ID"></DropDownListFieldSettings>
                        </SfDropDownList>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</div>

@code{
    private int? index { get; set; } = 0;

    private FilterType filterType { get; set; } = (FilterType)Enum.Parse(typeof(FilterType), ("Contains"));

    public void OnChangeFilterType(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, FilterTypes> args)
    {
        this.filterType = (FilterType)Enum.Parse(typeof(FilterType), (args.Value));
    }

    public class FilterTypes
    {
        public string ID { get; set; }

        public string Text { get; set; }
    }
    private List<FilterTypes> Data = new List<FilterTypes>() {
            new FilterTypes(){ ID= "Contains", Text= "Contains" },
            new FilterTypes(){ ID= "StartsWith", Text= "StartsWith" },
            new FilterTypes(){ ID= "EndsWith", Text= "EndsWith" },
         };

    public class Countries
    {
        public string Name { get; set; }

        public string Code { get; set; }
    }

    private List<Countries> Country = new List<Countries>
{
        new Countries() { Name = "Australia", Code = "AU" },
        new Countries() { Name = "Bermuda", Code = "BM" },
        new Countries() { Name = "Canada", Code = "CA" },
        new Countries() { Name = "Cameroon", Code = "CM" },
        new Countries() { Name = "Denmark", Code = "DK" },
        new Countries() { Name = "France", Code = "FR" },
        new Countries() { Name = "Finland", Code = "FI" },
        new Countries() { Name = "Germany", Code = "DE" },
        new Countries() { Name = "Greenland", Code = "GL" },
        new Countries() { Name = "Hong Kong", Code = "HK" },
        new Countries() { Name = "India", Code = "IN" },
        new Countries() { Name = "Italy", Code = "IT" },
        new Countries() { Name = "Japan", Code = "JP" },
        new Countries() { Name = "Mexico", Code = "MX" },
        new Countries() { Name = "Norway", Code = "NO" },
        new Countries() { Name = "Poland", Code = "PL" },
        new Countries() { Name = "Switzerland", Code = "CH" },
        new Countries() { Name = "United Kingdom", Code = "GB" },
        new Countries() { Name = "United States", Code = "US" },
    };
}

<style>

    .control-section.selectionlimit {
        margin-top: 20px;
    }

    .selectionlimit-multiselect {
        width: 50%;
        margin-top: 30px;
        margin-left: 100px;
    }

    .selectionText {
        width: 100px;
        font-size: 13px;
    }

    .apply-limit {
        margin-top: 10px;
    }

    .property {
        padding-bottom: 20px;
        font-weight: 600;
        font-size: 15px;
    }
</style>